<template>
    <view class="video-detail">
        <!-- 固定区域 -->
        <view class="fixed-header">
            <!-- 视频播放区域 -->
            <view class="video-player">
                <video :id="videoId" class="player" :src="currentVideoSrc" :poster="currentVideo.image"
                    controls></video>
            </view>

            <!-- 标签页导航 -->
            <view class="tab-nav">
                <view class="tab-item" :class="{ active: currentTab === 'video' }" @tap="switchTab('video')">
                    <text>视频</text>
                    <view :style="{ backgroundColor: t('color1') }" class="tab-line" v-if="currentTab === 'video'">
                    </view>
                </view>
                <view class="tab-item" :class="{ active: currentTab === 'comment' }" @tap="switchTab('comment')">
                    <text>评论({{ commentNumber }})</text>
                    <view :style="{ backgroundColor: t('color1') }" class="tab-line" v-if="currentTab === 'comment'">
                    </view>
                </view>
            </view>
        </view>

        <!-- 可滚动内容区域 -->
        <scroll-view class="scrollable-content" scroll-y>
            <!-- 视频信息区域 -->
            <view class="video-info" v-if="currentTab === 'video'">
                <view class="title">{{ currentVideo.name }}</view>
                <view class="meta">
                    <text class="year">{{ currentVideo.createtime }}<text
                            style="width: 40rpx;display:inline-block;opacity: 0;">占</text>[{{
                                cname }}]
                    </text>
                </view>
                <view class="meta">
                    <image class="reply-avatar" :src="videoPoster" mode="aspectFill" @tap="toAuthor"></image>
                    <text class="up-name" @tap="toAuthor">{{ author_nickname }}</text>
                    <button class="follow-btn" :style="{ backgroundColor: t('color1') }" @tap="toggleFollow">
                        <text class="follow-text">{{ isFollow ? '已关注' : '关注' }}</text>
                    </button>
                    <!-- <text class="separator">/</text>
                    <text class="type">日本</text>
                    <text class="separator">/</text>
                    <text class="type">动漫</text>
                    <text class="separator">/</text>
                    <text class="type">动作</text>
                    <text class="separator">/</text>
                    <text class="type">动画</text>
                    <text class="separator">/</text>
                    <text class="type">悬疑</text> -->
                    <!-- <text class="more">简介 ></text> -->
                </view>
                <view class="meta">
                    <text class="year">简介:{{ introduction }}</text>
                </view>

                <!-- 功能按钮组 -->
                <view class="action-buttons">
                    <view class="action-item" @tap="toggleLike">
                        <image v-show="isLiked" class="action-icon" :src="static_url + '/static/img/lt_like2.png'"
                            mode="aspectFit">
                        </image>
                        <image v-show="!isLiked" class="action-icon" src="@/static/img/lt_like.png" mode="aspectFit">
                        </image>
                        <text>点赞</text>
                    </view>
                    <view class="action-item" @tap="toggleCollect">
                        <image v-show="isCollected" class="action-icon" :src="static_url + '/static/img/shoucanged.png'"
                            mode="aspectFit"></image>
                        <image v-show="!isCollected" class="action-icon" :src="static_url + '/static/img/shoucang.png'"
                            mode="aspectFit"></image>
                        <text>收藏</text>
                    </view>
                    <view class="action-item">
                        <button class="action-item-button" @tap="shareVideo" open-type="share">

                        </button>
                        <image class="action-icon" src="@/static/img/share2.png" mode="aspectFit"></image>
                        <text>分享</text>

                    </view>
                </view>

                <!-- 选集区域 -->
                <view class="episodes-section">
                    <view class="section-header">
                        <text class="section-title">选集</text>
                    </view>

                    <!-- 分集列表 -->
                    <view class="episode-list">
                        <view class="episode-item" v-for="(item, index) in videoList" :key="index"
                            :class="{ active: currentEpisode === index }" @tap="switchEpisode(index)">
                            <!-- <text>第{{ String(index + 1).padStart(2, '0') }}集</text> -->
                            <text :style="{ color: t('color1') }">{{ item.sort }}</text>
                            <view :style="{ backgroundColor: t('color1') }" class="episode-line"
                                v-if="currentEpisode === index"></view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 评论区域 -->
            <view class="comment-section" v-else>
                <scroll-view class="comment-list" v-if="comments.length > 0" scroll-y="true"
                    @scrolltolower="loadMoreComments">
                    <view class="comment-item" v-for="(comment, index) in comments" :key="index">
                        <view class="comment-user">
                            <image class="user-avatar" :src="comment.headimg" mode="aspectFill"></image>
                            <view class="user-info">
                                <view class="user-name">{{ comment.nickname }}{{ comment.mid == 0 ? '（作者）' : '' }}
                                </view>
                                <view v-if="comment.content" class="comment-content">{{ comment.content }}</view>
                                <view class="comment-extra">
                                    <!-- <text v-if="comment.tag" class="user-tag">{{ comment.tag }}</text> -->
                                    <text class="comment-date">{{ comment.createtime }}</text>
                                    <text class="reply-btn" @tap="handleReply(comment)">回复</text>
                                    <text class="delete-btn" @tap="handleDelete(comment)"
                                        v-if="comment.mid == mid">删除</text>
                                </view>

                                <view v-if="comment.sub_list && comment.sub_list.length > 0" class="reply-list">
                                    <view v-for="(reply, replyIndex) in comment.sub_list" :key="replyIndex"
                                        v-if="replyIndex === 0 || comment.showAllReplies" class="reply-item">
                                        <image class="reply-avatar" :src="reply.headimg" mode="aspectFill"></image>
                                        <view class="reply-info">
                                            <view class="reply-name">{{ reply.nickname }}{{ reply.mid == 0 ? '（作者）' :
                                                '' }}</view>
                                            <view class="reply-content">
                                                <text class="reply-to" v-if="reply.replyTo">回复：
                                                    <!-- {{ reply.replyTo}}： -->
                                                </text>
                                                {{ reply.content }}
                                            </view>
                                            <view class="reply-extra">
                                                <text class="reply-date">{{ reply.createtime }}</text>
                                                <!-- <text class="reply-btn" @tap="handleReply(reply, comment)">回复</text> -->
                                                <text class="delete-btn" @tap="handleDelete(reply)"
                                                    v-if="reply.mid == mid">删除</text>
                                            </view>
                                        </view>
                                    </view>
                                    <view v-if="comment.sub_list.length > 1" class="expand-btn"
                                        @tap="toggleReplies(comment)">
                                        <text :style="{ color: t('color1') }" class="expand-text">{{
                                            comment.showAllReplies
                                                ? '收起' :
                                                `展开${comment.sub_list.length - 1}条回复` }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <nomore text="没有更多内容了" v-if="nomore"></nomore>
                </scroll-view>
                <!-- <view class="comment-tip" v-else> 
                </view> -->
                <view class="comment-tip" v-if="loaddata">
                    {{ commentTip }}
                </view>
            </view>
        </scroll-view>

        <!-- 评论输入框 -->
        <view class="comment-input-wrapper" v-if="currentTab === 'comment'">
            <view class="comment-input-box">
                <view v-if="replyTo" class="reply-tag" @tap="clearReply">
                    <text>@{{ replyTo.username }}</text>
                    <text class="close-icon">×</text>
                </view>
                <input class="comment-input" type="text" v-model="commentText" :placeholder="getPlaceholder" />
                <view :style="{ color: t('color1') }" class="send-btn" @tap="sendComment">发送</view>
            </view>
        </view>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            pre_url: app.globalData.pre_url,
            static_url: app.globalData.static_url,
            mid: '',
            videoId: 'myVideo',
            id: '',
            currentTab: 'video',
            videoUrl: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250106/5ae005872a7e9d6fefe422d8291feebd.mp4',
            isCollected: false,//是否收藏
            isLiked: false,//是否喜欢
            isFollow: false,//是否关注
            videoPoster: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
            cname: '',//合集名字
            cimage: '',//合集图片
            introduction: '',//视频简介
            createtime: '',//创建时间
            author_nickname: '',//作者昵称
            author_headimg: '',//作者头像
            author_id: '',//作者id
            pageviews: '',//浏览量
            currentVideo: null,//当前视频
            videoList: [],//视频列表
            currentEpisode: 0,//当前选集
            videoContext: null,
            currentVideoSrc: '',
            listid: '',//当前选集id
            episodes: new Array(80).fill({}),//选集列表
            replyTo: null,//回复对象
            commentText: '',//评论内容
            commentNumber: 0,//评论数量
            share_title: '',
            share_path: '',
            share_imageUrl: '',
            commentTip: '评论加载中...',
            loaddata: false,
            nomore: false,
            pagenum: 1,
            limit: 10,
            comments:
                [],
            // [
            //     {
            //         username: '日泉舞香',
            //         avatar: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
            //         tag: '积分',
            //         date: '2025-02-24',
            //         likes: 1,
            //         content: '这个视频太棒了！这个视频太棒了！这个视频太棒了！这个视频太棒了！这个视频太棒了！这个视频太棒了！',
            //         showAllReplies: false,
            //         sub_list: [
            //             {
            //                 username: '爱吃苹果',
            //                 avatar: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
            //                 content: '确实很不错确实很不错确实很不错确实很不错确实很不错确实很不错确实很不错确实很不错确实很不错',
            //                 date: '2025-02-24',
            //                 replyTo: '日泉舞香'
            //             },
            //             {
            //                 username: '英俊的御姐',
            //                 avatar: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
            //                 content: '错',
            //                 date: '2025-02-24',
            //                 replyTo: '爱吃苹果'
            //             }
            //         ]
            //     },
            // ].map(comment => ({
            //     ...comment,
            //     showAllReplies: false
            // }))
        }
    },
    mounted() {
        // 初始化视频上下文
        this.videoContext = uni.createVideoContext(this.videoId, this);
    },
    onLoad: function (opt) {
        this.mid = app.globalData.mid;
        if (opt.id) {
            this.id = opt.id;
        } else {
            app.error("参数缺少，请重试")
        }
        if (opt.listid) {
            this.listid = opt.listid;
        }
        // if (opt.video_center_list_id) {
        //     this.listid = opt.video_center_list_id;
        // }
        // if (opt.video_center_content_id) {
        //     this.id = opt.video_center_content_id;
        // }
        this.getdata()
    },
    onPullDownRefresh: function () {
        this.getdata();
    },
    computed: {
        scrollViewClass() {
            return {
                'scrollable-content': true,
                'has-input': this.currentTab === 'comment'
            }
        },
        getPlaceholder() {
            return this.replyTo ? '回复 ' + this.replyTo.username : '说点什么...';
        }
    },

    methods: {

        getdata() {
            app.showLoading('加载中');
            var that = this;
            app.get('VideoCenter/info?id=' + that.id, {}, function (res) {
                if (res && res.status == 200) {
                    that.cname = res.data.name;
                    that.videoUrl = res.data.video;
                    that.cimage = res.data.image;
                    that.introduction = res.data.introduction;
                    that.createtime = res.data.createtime;
                    that.author_nickname = res.data.author_nickname;
                    that.author_headimg = res.data.author_headimg;
                    that.isFollow = res.data.is_involved;
                    that.author_id = res.data.author_id;
                    that.pageviews = res.data.pageviews;
                    if (!res.data.video_list || res.data.video_list.length == 0) {
                        that.videoList = [{
                            id: 0,
                            name: that.cname,
                            video: that.videoUrl,
                            image: that.cimage,
                            sort: '暂无选集'
                        }];
                    } else {
                        that.videoList = res.data.video_list;
                    }
                    if (that.listid) {
                        that.currentVideo = that.videoList.find(item => item.id == that.listid);
                        that.currentEpisode = that.videoList.findIndex(item => item.id == that.listid);
                        that.currentVideoSrc = that.currentVideo.video;
                        that.isCollected = that.currentVideo.is_collect;
                        that.isLiked = that.currentVideo.is_thumb;
                        that.commentNumber = that.currentVideo.evaluations;
                    } else {
                        that.currentVideo = that.videoList[0];
                        that.listid = that.currentVideo.id;
                        that.currentVideoSrc = that.currentVideo.video;
                        that.isCollected = that.currentVideo.is_collect;
                        that.isLiked = that.currentVideo.is_thumb;
                        that.commentNumber = that.currentVideo.evaluations;
                    }
                    that.viewAdd(that.listid);
                    app.showLoading(false);
                } else {
                    app.showLoading(false);
                    app.error(res.msg);
                }
                that.loaded();
            });
        },

        // 增加浏览量
        viewAdd(vid) {
            app.post('VideoCenter/pageviewsAdd', { video_center_content_id: vid }, function (res) {
                if (res && res.status == 200) {
                } else {
                    console.log(res.msg);
                }
            });
        },

        loadMoreComments: function () {
            console.log("滚动到底部")
            if (!this.nomore) {
                this.pagenum = this.pagenum + 1;
                this.getComment(this.listid);
            } else {
                app.error('没有更多内容了');
            }

        },

        // 获取评论
        getComment(vid) {
            let that = this;
            that.nomore = false;
            app.get('VideoCenter/evaluateList?id=' + vid + '&page=' + that.pagenum + '&limit=' + that.limit, {}, function (res) {
                if (res && res.status == 200) {
                    that.commentNumber = res.data.evaluations;
                    // if (!res.data.list || res.data.list.length == 0) {
                    //     that.loaddata = true;
                    //     that.commentTip = '暂无评论';
                    //     return;
                    // }
                    if (that.pagenum == 1) {
                        that.comments = res.data.list.map(comment => ({
                            ...comment,
                            showAllReplies: false
                        }));
                        if (res.data.list.length == 0) {
                            that.commentTip = '暂无评论';
                            that.loaddata = true;
                            that.nomore = false;
                        }
                    } else {
                        if (res.data.list.length == 0) {
                            that.nomore = true;
                            that.loaddata = false;
                        } else {
                            let cl = res.data.list.map(comment => ({
                                ...comment,
                                showAllReplies: false
                            }));
                            var datalist = that.comments;
                            var newdata = datalist.concat(cl);
                            that.comments = newdata;
                        }
                    }
                } else {
                    app.error(res.msg);
                }
            });
        },

        switchTab(tab) {
            this.currentTab = tab;
            this.comments = [];
            this.commentTip = '评论加载中...';
            this.loaddata = true;
            this.pagenum = 1;
            this.getComment(this.listid);
        },
        switchEpisode(index) {
            if (this.currentEpisode === index) return;
            this.currentEpisode = index;
            this.currentVideo = this.videoList[index];
            this.listid = this.currentVideo.id;
            this.getdata();
            // this.isCollected = this.currentVideo.is_collect;
            // this.isLiked = this.currentVideo.is_thumb;
            // this.commentNumber = this.currentVideo.evaluations;
            // this.viewAdd(this.currentVideo.id);
            // this.getComment(this.currentVideo.id);
            this.switchVideo(this.currentVideo.video);
            this.commentText = '';
            this.clearReply();
            // 这里可以添加切换视频的逻辑
            console.log('切换到第', index + 1, '集');
        },

        switchVideo(newSrc) {
            // 停止当前视频
            this.videoContext.stop(); // 停止当前视频

            // 更新视频路径
            this.currentVideoSrc = newSrc;

            // 重新创建视频实例
            this.$nextTick(() => {
                this.videoContext = uni.createVideoContext(this.videoId, this);
                this.videoContext.play(); // 自动播放新视频
            });
        },
        handleReply(user, parentComment = null) {
            this.replyTo = {
                username: user.nickname,
                parentComment: parentComment,
                uid: user.id
            };
            // 自动聚焦输入框
            this.$nextTick(() => {
                const query = uni.createSelectorQuery().in(this);
                query.select('.comment-input').boundingClientRect(data => {
                    if (data) {
                        uni.pageScrollTo({
                            scrollTop: data.top,
                            duration: 300
                        });
                    }
                }).exec();
            });
        },
        handleDelete(comment) {
            let that = this;
            uni.showModal({
                title: '提示',
                content: "是否确认删除评论？",
                success(res) {
                    if (res.confirm) {
                        app.showLoading('删除中...');
                        app.post('VideoCenter/evaluateDel', { video_center_content_id: that.listid, video_center_evaluate_id: comment.id, video_center_list_id: that.id }, function (res) {
                            if (res && res.status == 200) {
                                app.success('删除成功');
                                that.pagenum = 1;
                                that.getComment(that.listid);
                                app.showLoading(false);
                            } else {
                                app.error("删除失败:" + res.msg);
                                app.showLoading(false);
                            }
                        });
                    } else if (res.cancel) {
                    }
                }
            });
        },
        clearReply() {
            this.replyTo = null;
        },
        sendComment() {
            let that = this;
            if (!that.commentText.trim()) {
                uni.showToast({
                    title: '请输入评论内容',
                    icon: 'none'
                });
                return;
            }	
            let pid = that.replyTo ? that.replyTo.uid : null
            app.showLoading('发送中...');
            app.post('VideoCenter/evaluateAdd', { video_center_content_id: that.listid, content: that.commentText, parent_id: pid }, function (res) {
                if (res && res.status == 200) {
                    app.showLoading(false);
                    app.success('评论成功,请等待审核');
                    // 清空输入框和回复状态
                    that.commentText = '';
                    // that.commentNumber = that.commentNumber + 1;
                    that.clearReply();
                } else {
                    app.showLoading(false);
                    app.error("评论失败:" + res.msg);
                }
            });

            return;
            // 构建评论数据
            const commentData = {
                content: this.commentText,
                date: new Date().toISOString().split('T')[0],
                username: '当前用户', // 这里应该是实际的用户信息
                avatar: 'https://example.com/avatar.jpg' // 这里应该是实际的用户头像
            };

            if (this.replyTo) {
                // 处理回复逻辑
                if (this.replyTo.parentComment) {
                    // 回复评论的回复
                    if (!this.replyTo.parentComment.sub_list) {
                        this.replyTo.parentComment.sub_list = [];
                    }
                    this.replyTo.parentComment.sub_list.push({
                        ...commentData,
                        replyTo: this.replyTo.username
                    });
                } else {
                    // 直接回复评论
                    this.comments.unshift({
                        ...commentData,
                        sub_list: []
                    });
                }
            } else {
                // 发表新评论
                this.comments.unshift({
                    ...commentData,
                    sub_list: []
                });
            }

            // 清空输入框和回复状态
            this.commentText = '';
            this.clearReply();

            uni.showToast({
                title: '发送成功',
                icon: 'success'
            });
        },
        toggleReplies(comment) {
            comment.showAllReplies = !comment.showAllReplies;
        },
        toggleLike() {
            let that = this;
            that.isLiked = !that.isLiked;
            app.post('VideoCenter/thumbSet', { video_center_content_id: that.listid, type: !that.isLiked ? 2 : 1 }, function (res) {
                if (res && res.status == 200) {
                    if (that.isLiked) {
                        //app.success('点赞成功');
                    }
                } else {
                    if (res.msg == "已点赞") {
                    } else {
                        app.error(res.msg);
                        that.isLiked = !that.isLiked;
                    }
                }
            });
        },
        toggleCollect() {
            let that = this;
            that.isCollected = !that.isCollected;
            app.post('VideoCenter/collectsSet', { video_center_content_id: that.listid, type: !that.isCollected ? 2 : 1 }, function (res) {
                if (res && res.status == 200) {
                    if (that.isCollected) {
                        // app.success('收藏成功');
                    }
                } else {
                    if (res.msg == "已收藏此视频") {
                    } else {
                        app.error(res.msg);
                        that.isCollected = !that.isCollected;
                    }
                }
            });
        },
        shareVideo() {
            let that = this;
            that.share_title = that.currentVideo.name;
            that.share_path = '/pagesZone/video/video_detail?id=' + that.id + '&listid=' + that.listid;
            that.share_imageUrl = that.currentVideo.image;
            uni.share({
                title: that.share_title,
                path: that.share_path,
                imageUrl: that.share_imageUrl,
            });
        },
        toggleFollow() {
            let that = this;
            that.isFollow = !that.isFollow;
            app.post('VideoCenter/authorInvolved', { video_center_content_id: that.listid, author_id: that.author_id, type: !that.isFollow ? 2 : 1 }, function (res) {
                if (res && res.status == 200) {
                    if (that.isFollow) {
                        // app.success('收藏成功');
                    }
                } else {
                    if (res.msg == "已关注此视频") {
                    } else {
                        app.error(res.msg);
                        that.isFollow = !that.isFollow;
                    }
                }
            });
        },
        toAuthor() {
            uni.navigateTo({
                url: `/pagesZone/video/author_detail?id=${this.author_id}`
            });
        },
    },
    onShareAppMessage() {
        return {
            title: this.share_title,
            path: this.share_path,
            imageUrl: this.share_imageUrl,
        };
    },
}
</script>

<style lang="scss" scoped>
.video-detail {
    min-height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
}

.video-player {
    width: 100%;
    height: 422rpx;
    background: #000;
    position: relative;
}

.player {
    width: 100%;
    height: 100%;
}

.tab-nav {
    display: flex;
    background: #ffffff;
    height: 88rpx;
}

.tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #999;
    position: relative;
}

.tab-item.active {
    color: #000000;
}

.tab-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background: #ba1f25;
}

.video-info {
    padding: 20rpx;
    background: #ffffff;
    color: #020202;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
}

.meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 30rpx;
}

.up-name {
    font-size: 26rpx;
    color: #000000;
    margin-right: 20rpx;
}



.separator {
    margin: 0 10rpx;
    color: #666;
}

.more {
    margin-left: auto;
    color: #999;
}

.action-buttons {
    display: flex;
    justify-content: space-around;
    padding: 16rpx 0;
    border-bottom: 1rpx solid rgba(207, 4, 4, 0.1);
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000000;
    font-size: 24rpx;
}

.action-item-button {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
}


.action-icon {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 8rpx;
}

.episodes-section {
    padding-top: 30rpx;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 32rpx;
    color: #000000;
    font-weight: bold;
}

.expand-all {
    font-size: 24rpx;
    color: #999;
}

.source-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 20rpx;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
}

.source-left {
    display: flex;
    align-items: center;
}

.source-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
}

.source-name {
    font-size: 28rpx;
    color: #000000;
    margin-right: 16rpx;
}

.video-count {
    font-size: 24rpx;
    color: #999;
}

.switch-source {
    display: flex;
    align-items: center;
    color: #ba1f25;
    font-size: 24rpx;
}

.switch-icon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 4rpx;
}

.episode-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.episode-item {
    width: calc((100% - 60rpx) / 4);
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 73, 73, 0.05);
    border-radius: 8rpx;
    color: #000000;
    font-size: 26rpx;
    position: relative;
}

.episode-item.active {
    color: #ba1f25;
}

.episode-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background: #ba1f25;
}

.scrollable-content {
    margin-top: calc(422rpx + 88rpx); // 视频播放器高度 + 标签导航高度
    height: calc(100vh - 422rpx - 88rpx); // 减去固定区域的高度
    box-sizing: border-box;
}

// 当显示评论区时，需要为底部输入框留出空间
.scrollable-content.has-input {
    height: calc(100vh - 422rpx - 88rpx - 112rpx); // 额外减去输入框高度
    padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
}

.comment-section {
    background: #ffffff;
    min-height: 300rpx;
    height: 90%;
    // height: calc(100% - env(safe-area-inset-bottom));
}

.comment-tip {
    padding: 30rpx 0;
    text-align: center;
    color: #999;
    font-size: 28rpx;
}

.comment-list {
    padding: 0 30rpx;
    //padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    // padding-bottom: 80rpx;
    height: 100%;
    overflow-y: scroll;
}

.comment-item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.comment-user {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.user-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.user-info {
    flex: 1;
}

.user-name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 8rpx;
}

.comment-extra {
    display: flex;
    align-items: center;
}

.user-tag {
    font-size: 24rpx;
    color: #666;
    margin-right: 16rpx;
}

.comment-date {
    font-size: 24rpx;
    color: #999;
}

.reply-btn {
    font-size: 24rpx;
    color: #000000;
    margin-left: 15rpx;
    background-color: #f1f1f1;
    padding: 6rpx;
    border-radius: 8rpx;
}

.delete-btn {
    font-size: 24rpx;
    color: red;
    margin-left: 20rpx;
    background-color: #f1f1f1;
    padding: 6rpx;
    border-radius: 8rpx;
}

.comment-content {
    font-size: 28rpx;
    color: #333;
    margin: 16rpx 0;
    line-height: 1.5;
}

.reply-list {
    background: #f8f8f8;
    border-radius: 8rpx;
    margin-top: 16rpx;
    padding: 16rpx;
}

.reply-item {
    display: flex;
    margin-bottom: 16rpx;

    &:last-child {
        margin-bottom: 0;
    }
}

.reply-avatar {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 12rpx;
}

.reply-info {
    flex: 1;
}

.reply-name {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 4rpx;
}

.reply-content {
    font-size: 26rpx;
    color: #333;
    line-height: 1.4;
}

.reply-to {
    color: #ba1f25;
    margin-right: 4rpx;
}

.reply-extra {
    margin-top: 4rpx;
}

.reply-date {
    font-size: 22rpx;
    color: #999;
}

.comment-input-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 100;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.comment-input-box {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 36rpx;
    padding: 0 24rpx;
    min-height: 72rpx;
}

.reply-tag {
    display: inline-flex;
    align-items: center;
    background: #e8f3ff;
    padding: 4rpx 9rpx;
    border-radius: 18rpx;
    margin-right: 12rpx;
    font-size: 30rpx;
    color: #ba1f25;
}

.close-icon {
    margin-left: 8rpx;
    font-size: 32rpx;
    color: #999;
}

.comment-input {
    flex: 1;
    height: 72rpx;
    font-size: 28rpx;
    background: transparent;
}

.send-btn {
    padding: 0 24rpx;
    height: 72rpx;
    line-height: 72rpx;
    color: #ba1f25;
    font-size: 28rpx;
}

.expand-btn {
    margin-top: 16rpx;
    padding: 8rpx 0;
}

.expand-text {
    font-size: 24rpx;
    color: #ba1f25;
    cursor: pointer;
}

.follow-btn {
    background: #ba1f25;
    color: #fff;
    padding: 0rpx 12rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    height: 40rpx;
    line-height: 40rpx;
    margin-left: 10rpx;
}
</style>
